<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .router-link-active{
      background-color:red;
    }
  </style>
</head>
<body>
  <div id="app">
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
    <router-view name="c"></router-view>
    <!-- 路由组件的出口 -->
  </div>
  <script src="./vue.js"></script>
  <script src="./vue-router.js"></script>
  <script>
  
   const Home = {
     template: `
      <div>
        home1页  
      </div>
     `
   }
   const Home2 = {
     template: `
      <div>
        home2页  
      </div>
     `
   }
   const Home3 = {
     template: `
      <div>
        home3页  
      </div>
     `
   }
  
  const routes = [ // 配置路由规则
      {
        path: '/home',
        components: {
          a: Home,
          b: Home2,
          c: Home3
        }
      }
    ]
  //  定义路由
  const router = new VueRouter({
    routes
  })
    const vm = new Vue({
      el: '#app',
      router
    })

  </script>
</body>
</html>